<template>
  <div class="organization-edit">
    <div class="person-info-select">
      <group>
        <x-address title="地区" v-model="addressValue" :list="addressData" placeholder="请选择地址"></x-address>
        <x-input title="联系人" v-model="contactName" placeholder="请填写联系人姓名"></x-input>
        <x-input title="联系方式" v-model="contactTel" placeholder="请填写联系人电话"></x-input>
      </group>
    </div>

    <!--拍照section-->
    <div class="take-photo-section">
      <div class="item-section p40">
        <p class="title">请拍摄并上传您的工商管理执照</p>
        <div>
          <img src="http://placeholder.qiniudn.com/800x300/FF3B3B/ffffff" alt="">
        </div>
        <p class="btns flex-cont">
          <img src="../../images/takePhoto.png" alt="">
          <span>拍摄工商执照</span>
        </p>
      </div>
      <div class="item-section p40">
        <p class="title">请拍摄上传您的身份证正面</p>
        <div>
          <img src="http://placeholder.qiniudn.com/800x300/FF3B3B/ffffff" alt="">
        </div>
        <p class="btns flex-cont">
          <img src="../../images/takePhoto.png" alt="">
          <span>拍摄身份证正面</span>
        </p>
      </div>
      <div class="item-section p40">
        <p class="title">请拍摄上传您的身份证反面</p>
        <div>
          <img src="http://placeholder.qiniudn.com/800x300/FF3B3B/ffffff" alt="">
        </div>
        <p class="btns flex-cont">
          <img src="../../images/takePhoto.png" alt="">
          <span>拍摄身份证反面</span>
        </p>
      </div>
    </div>
    <div class="btn-check">提交认证</div>
  </div>
</template>

<script>
  import { Group, Cell, XAddress, ChinaAddressV4Data, XInput, Selector } from 'vux';
  import commonMask from "../common/common-mask.vue";

  let CONSTANT = require('../../../wechat/static/constant/constant.js'),
    common = require("../../../wechat/static/common/common.js"),
    wsService = require("../../../wechat/static/common/wechat-jsdk.js");
  common.setPageTitle('机构认证页面')
  export default {
    components: {
      Group, Cell, XAddress, XInput, Selector,
      commonMask
    },
    data () {
      return {
        addressValue: [],
        contactName: "",
        contactTel: "",
        addressData: ChinaAddressV4Data,
      }
    },
    mounted(){

    },
    methods:{

    }
  }
</script>

<style lang="scss">
  .organization-edit {
    font-size: .34rem;
    height: 100%;
    background-color: #f4f4f4;
    .p40 {
      padding: .4rem .3rem 0 .3rem;
    }
    .vux-x-input input {
      text-align: right;
    }

    .fixed-section-modal {
      position: fixed;
      background: #fff;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 3;
      overflow-y: scroll;
      height: 9rem;
      div {
        font-size: .32rem;
        margin-bottom: .3rem;
      }
      .section-list {
        margin-bottom: .88rem;
        li {
          padding: .17rem .24rem;
          border: 1px solid #e1e1e1;
          border-radius: .06rem;
          background-color: #fff;
          color: #666;
          font-size: .26rem;
          margin-right: .2rem;
          margin-bottom: .2rem;
        }
        .active {
          border: 2px solid #0060A9;
          color: #0060A9;
        }
      }
      p {
        position: fixed;
        width: 100%;
        left: 0;
        bottom: 0;
        height: .88rem;
        line-height: .88rem;
        text-align: center;
        background-color: #0063AE;
        color: #fff;
        font-size: .32rem;
      }
    }
    .take-photo-section {
      margin-top: .2rem;
      background: #fff;
      .item-section {
        &:last-child {
          margin-bottom: .6rem;
        }
        .title {
          font-size: .32rem;
          margin-bottom: .3rem;
          color: #111;
        }
        div {
          height: 4.8rem;
          text-align: center;
          background-color: #F4F4F4;
          img {
            width: 6rem;
            height: 4.25rem;
            margin-top: .275rem;
            vertical-align: middle;
          }
        }

        .btns {
          height: .88rem;
          line-height: .88rem;
          border: 1px solid #999;
          text-align: center;
          border-radius: .1rem;
          margin-top: .27rem;
          img {
            width: .37rem;
            height: .31rem;
            vertical-align: middle;
            margin-right: .21rem;
          }
          span {
            font-size: .34rem;
            color: #0063AE;

          }
        }

      }
    }

    .btn-check {
      width: 6.9rem;
      margin-left: .3rem;
      height: .88rem;
      line-height: .88rem;
      background-color: #0063AE;
      font-size: .34rem;
      text-align: center;
      color: #fff;
      border-radius: .1rem;
      margin-bottom: .46rem;
    }
  }
</style>
